<!-- 海报页 -->

<template>
	<view class="privacyBox">
		<u-popup class="popup" v-model="showPopup" mode="center" width="80%" border-radius="16" :mask-close-able="false">
			<view class="box">
        <view class="title">{{ name }}隐私保护指引</view>
        <view class="content">在使用{{ name }}服务之前，请仔细阅读<text @click="openPrivacyContract" style="color:#19be6b;">{{ privacyContractName }}</text>。如你同意{{ privacyContractName }}，请点击“同意”开始使用{{ name }}。</view>
        <view class="button">
          <navigator open-type="exit" target="miniProgram" class="jujue">拒绝</navigator>
          <button class="tongyi" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
      </view>
		</u-popup>
	</view>
</template>
<script>
	export default {
    // name:'Privacy',
		data() {
			return {
        showPopup:false,
        privacyContractName:'',
        name:'',
			}
		},
    created () {
      this.getPrivacy()
    },
		methods: {
      getPrivacy(){
        let _this = this
        wx.getPrivacySetting({
          success(res) {
            console.log('是否需要弹出隐私政策===>>>',res);
            _this.privacyContractName = res.privacyContractName
            _this.name = res.privacyContractName.split('小程序')[0].replace('《','')
            if (res.needAuthorization) {
              _this.showPopup = true
            }
          }
        })
      },
			// 打开隐私协议页面
      openPrivacyContract() {
        const _ = this
        wx.openPrivacyContract({
          fail: () => {
            uni.showToast({
              title: '遇到错误',
              icon: 'error'
            })
          }
        })
      },
      // 拒绝隐私协议
      exitMiniProgram() {
        // 直接退出小程序
        wx.exitMiniProgram()
      },
      // 同意隐私协议
      handleAgreePrivacyAuthorization() {
        this.showPopup = false
      },
		}
	}
</script>

<style lang="scss" scoped>
.privacyBox {
  .box {
    width: 100%;
    height: auto;
    // border-radius: 16rpx;
    .title {
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34rpx;
      color: #000;
      font-weight: 700;
    }
    .content {
      padding: 0 24rpx;
      margin: 24rpx 0;
      font-size: 28rpx;
    }
    .button {
      margin-bottom: 24rpx;
      padding: 0 24rpx;
      width: 100%;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .jujue,.tongyi {
        width: 40%;
        height: 100%;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        font-weight: 600;
      }
      .jujue {
        background-color: #f3f6f9;
        color: #97a3b7;
      }
      .tongyi {
        border: none;
        padding: 0;
        margin: 0;
        color: #ffffff;
        background-color: #19be6b;
        &::after {
          display: none;
        }
      }
    }
  }
}
</style>
